<template>
	<view class="login">
		<view class="login-image">
			<image src="http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919965604413191.png" mode=""></image>
		</view>
		<view class="name">
			<view class="name-title">
				{{type === 0 ?'申请获取以下权限' :'手机号码授权'}}
			</view>
			<view class="name-content">
				{{type === 0 ?'获取你的公开信息（昵称、头像等）' :'为了提供更好的服务请允许获取用户手机号码'}}
			</view>
		</view>
		
		<button @click="getUserInfo()" class="btn" v-if="status==0">
			<!-- <image src="../../static/dl_wx@2x.png" mode=""></image> -->
			<view class="btn-view">
				授权用户信息
			</view>
		</button>
		<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="btn" v-if="status==1">
			<!-- <image src="../../static/dl_wx@2x.png" mode=""></image> -->
			<view  class="btn-view">
				绑定手机号
			</view>
		</button>
		<button @click="handleshowPrivacy"  class="btn" v-if="status==1 && vue_privacy.showPrivacy">
			<!-- <image src="../../static/dl_wx@2x.png" mode=""></image> -->
			<view  class="btn-view">
				绑定手机号
			</view>
		</button>
		<privacy v-if="showPrivacy" @change="showPrivacyChange"></privacy>
		<!-- <view class="xieyi">
			<image src="../../static/xz_2@2x.png" @click="handleFlag"  v-if="flag"  mode=""></image>
			<image src="../../static/xz_1@2x.png" @click="handleFlag" v-else mode=""></image>
			<text class="xieyi-text">我已阅读并同意</text>
			<text class="xieyi-text1" @click="handleXieyi">《用户协议》</text>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code:'',
				status:1,
				openid:'',
				sessionKey:'',
				iv:'',
				encryptedData:'',
				type:1,
				flag:true,
				nickName:'',
				avatarUrl:'',
				gender:'',
				share:uni.getStorageSync('share'),
				showPrivacy:false,
			}
		},
		onLoad() {
			uni.login({
				success: (res) => {
					this.code = res.code
					this.getOpenid()
				}
			})
		},
		methods: {
			//是否选定协议
			handleFlag(){
				this.flag = !this.flag
			},
			//协议内容
			handleXieyi(){
				console.log(11)
				const params = 'type=' + '1'
				uni.navigateTo({
					url:'/pages/xieyineirong/xieyineirong?' + params
				})
			},
			//打开弹框
			handleshowPrivacy(){
				console.log(11111)
				this.showPrivacy = true
			},
			//关闭隐私
			showPrivacyChange(){
				this.showPrivacy = false
			},
			//确定
			change(){
				this.showPrivacy = false
				this.$u.toast('请再次获取手机号码登录')
			},
			//获取code
			getUserInfo(){
				if (!this.flag) {
					this.$u.toast('请同意用户协议')
					return
				}
				uni.getUserProfile({
					desc:"获取你的昵称、头像、地区及性别",
					success:(res)=>{
						console.log(res.userInfo)
						this.$u.toast('获取成功')
						this.$u.vuex('vuex_nickName', res.userInfo.nickName)
						this.$u.vuex('vuex_avatarUrl', res.userInfo.avatarUrl)
						const userInfo = {
							nickname:res.userInfo.nickName,
							avatarUrl:res.userInfo.avatarUrl
						}
						this.$u.vuex('vuex_user', userInfo)
						this.nickName = res.userInfo.nickName
						this.avatarUrl = res.userInfo.avatarUrl
						this.gender = res.userInfo.gender
						this.type = 1
						uni.login({
							success: (res) => {
								this.code = res.code
								this.getOpenid()
							}
						})
					}
				})
				
				
			},
			// 获取openid
			async getOpenid(){
				const data = {
					code:this.code
				}
				const res = await this.$u.api.openid(data)
				this.openid = res.data.openid
				this.sessionKey = res.data.sessionKey
				this.status = 1
			},
			//获取手机号登录
			getPhoneNumber(e) {
				if (!this.flag) {
					this.$u.toast('请同意用户协议')
					return
				}
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					this.iv = e.detail.iv;
					this.encryptedData = e.detail.encryptedData;
                    this.getLogin()
				}

			},
			//登录
			async getLogin(){
				const data = {
					encryptedData:this.encryptedData,
					iv:this.iv,
					openid:this.openid,
					sessionKey:this.sessionKey,
					nickName:this.nickName,
					gender:this.gender,
					avatarUrl:this.avatarUrl,
					recodeCode:uni.getStorageSync('recodeCode')?uni.getStorageSync('recodeCode'):''
				}
				const res = await this.$u.api.login(data)
				const params = 'recodeCode=' + res.data.recodeCode
				const share = { // 分享到微信和朋友圈
					title: '嗨美汇是一个为百业赋能的数字化营销平台',
					path: '/pages/index/index?' + params,
					imageUrl: 'http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_17020241755257303.jpg',
					desc:'嗨美汇',
					content:'嗨美汇是一个为百业赋能的数字化营销平台'
				}
				uni.setStorageSync('myRecodeCode',res.data.recodeCode)
				uni.setStorageSync('share',share)
				console.log(res)
				this.$u.vuex('vuex_token', res.data.token)
				this.$u.vuex('vuex_roleType', res.data.roleType)
				uni.showLoading({
					title:'登录中',
					duration: 1000
				});
				const backUrl = uni.getStorageSync('back_url') || 'pages/index/index'
				const dataUrl = backUrl.slice(0, 23)
				console.log(dataUrl,'dataUrl')
				uni.removeStorageSync('url')
				console.log(backUrl,'backUrl')
				setTimeout(()=>{
					this.$u.toast('登录成功')
					this.$u.route({
						type: backUrl==='pages/wode/wode' || backUrl === 'pages/index/index' || backUrl === 'pages/fenlei/fenlei' || backUrl === 'pages/gouwudai/gouwudai' || dataUrl==='pages/index/index?scene'?   'switchTab' : 'navigateTo',//使用relaunch在App上会导致无法返回首页,//使用relaunch在App上会导致无法返回首页
						url: backUrl
					})
				},1000)
				
				// TODO  判断  如果是底部tabbar  用switchTab  如果是普通页面  使用reditectTo
				
				// setTimeout(() =>{
				// 	this.$u.route({
				// 		type: backUrl==='pages/wode/wode' || backUrl === 'pages/index/index' || backUrl === 'pages/fenlei/fenlei' || backUrl === 'pages/gouwudai/gouwudai'? 'switchTab' : 'navigateTo',//使用relaunch在App上会导致无法返回首页,//使用relaunch在App上会导致无法返回首页
				// 		url: backUrl
				// 	})
				// },1500)
			}
			
		}
	}
</script>
<style>
	page{
		width: 100%;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
    .login{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919792830063836.png') no-repeat;
		background-size: 100% 100%;
	}
	.login-image{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.login-image image{
		margin-top: 400rpx;
		width: 408rpx;
		height: 200rpx;
	}
	.name{
		padding: 50rpx 50rpx 0rpx 50rpx;
	}
	.name-title{
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff;
		line-height: 44rpx;
	}
	.name-content{
		margin-top: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ffffff;
		line-height: 44rpx;
	}
	.btn{
		margin-top: 100rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 650rpx;
		height: 100rpx;
		background: #ffffff;
	}
	.btn image{
		width: 64rpx;
		height: 64rpx;
	}
	.btn view{
		margin-left: 20rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #5D22BA;
		line-height: 44rpx;
	}
	.btn-view{
		// background: url('http://523tongcheng.oss-cn-hangzhou.aliyuncs.com/webStorage/web_16602103319357140.png') no-repeat;
		// background-size: 100% 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #00AFFF;
		line-height: 100rpx;
	}
	.xieyi{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 40rpx;
		left: 0;
		width: 750rpx;
	}
	.xieyi image{
		width: 36rpx;
		height: 36rpx;
	}
	.xieyi-text{
		margin-left: 24rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 42rpx;
	}
	.xieyi-text1{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 42rpx;
	}
</style>
